<template>
	<view class="zong">
		<view class="ding">
			<view class="sousuo">
				<image class="fangda" src='/static/images/fangdajing.png'></image>
				<input type="text" class="sousuozi" placeholder="搜索我的订单" v-model='sousuozhi'>
			</view>
			<scroll-view scroll-x="true" class='shaixuan'>
				<view class="xiang" :class="{active: item[2] === 1}" v-for='(item, index) in shaixuan' :key='index' @tap="shaixuan(item[1])">
					<text class="zi">{{item[0]}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shaixuan: [
					['全部', '0', 1],
					['待付款', '1', 0],
					['待接单', '2', 0],
					['配送/自提', '3', 0],
					['待评价', '4', 0],
					['退款', '5', 0]
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.zong{
		width: 750rpx;
		position: relative;
		.ding{
			position: fixed;
			padding: 0 30rpx;
			.sousuo{
				width: 690rpx;
				height: 70rpx;
				top: 185rpx;
				position: absolute;
				left: 30rpx;
				border-radius: 16rpx;
				background-color: #EFF0F2;
				.fangda{
					width: 27rpx;
					height: 27rpx;
					top: 22rpx;
					left: 27rpx;
					position: absolute;
				}
				.sousuozi{
					top: 12rpx;
					left: 73rpx;
					position: absolute;
					font-size: 24rpx;
					width: 600rpx;
				}
			}
		}
		.shaixuan{
			width: 727rpx;
			left: 32rpx;
			position: absolute;
			top: 286rpx;
			height: 62rpx;
			.xiang{
				box-sizing: border-box;
				float: left;
				margin-left: 40rpx;
				height: 62rpx;
				position: relative;
				&:nth-child(1){
					margin-left: 0;
				}
				text{
					font-size: 30rpx;
				}
			}
			.active{
				border-bottom: 6rpx #84BD00 solid;
				text{
					color: #84BD00;
				}
			}
		}
	}
</style>
